<template>
  <div>
    <my-header ischeck="indent"></my-header>
    <div class="table-indent">
      <el-table :data="tableData" height="500" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="limg" label="商品图片" width="180">
          <template v-slot="scope">
            <img :src="scope.row.limg" alt="" width="100" height="70">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="prise" label="交易价格">
        </el-table-column>
        <el-table-column prop="away" label="支付方式">
        </el-table-column>
        <el-table-column prop="showaway" label="交易形式">
        </el-table-column>
        <el-table-column prop="order" label="订单号" width="200">
        </el-table-column>
        <el-table-column prop="status" label="交易状态">
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2021-11-11',
          name: '棱彩2号武器箱',
          limg: require('../assets/img/13b9e1634326eecf39ceb1345a714c8.jpg'),
          prise: '￥0.6',
          showaway: '出售',
          away: '银行卡',
          status: '交易成功',
          order: '21312312124312412'
        }, {
          date: '2021-11-11',
          name: '棱彩2号武器箱',
          limg: require('../assets/img/13b9e1634326eecf39ceb1345a714c8.jpg'),
          prise: '￥0.6',
          showaway: '出售',
          away: '银行卡',
          status: '交易成功',
          order: '21312312124312412'
        }, {
          date: '2021-11-11',
          name: '棱彩2号武器箱',
          limg: require('../assets/img/13b9e1634326eecf39ceb1345a714c8.jpg'),
          prise: '￥0.6',
          showaway: '出售',
          away: '银行卡',
          status: '交易成功',
          order: '21312312124312412'
        }, {
          date: '2021-11-11',
          name: '棱彩2号武器箱',
          limg: require('../assets/img/13b9e1634326eecf39ceb1345a714c8.jpg'),
          prise: '￥0.6',
          showaway: '出售',
          away: '银行卡',
          status: '交易成功',
          order: '21312312124312412'
        }],
        currentPage: 5 //当前所在页数
      }
    },
    methods: {
      // 分页功能
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style>
  .table-indent,
  .block {
    padding: 1rem;
  }

  .block {
    display: flex;
    justify-content: right;
  }
</style>
